<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
<!--        <link href="../css/bootstrap.min.css" rel="stylesheet">-->
        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<!--        <script src="../js/jquery.min.js"></script>-->
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<!--        <script src="../js/bootstrap.min.js"></script>-->


        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">

<!--            <nav class="navbar navbar-expand-sm bg-dark navbar-dark .sticky-top">-->
                <div class="container-fluid">
<!--                    &lt;!&ndash;                    是一个log&ndash;&gt;-->
<!--                    <a class="navbar-brand" href="#">-->
<!--                        <img src="../images/peopleImg.png" alt="Avatar Logo" style="width:10%;" class="rounded-pill">-->
<!--                    </a>-->
                    <div class="collapse navbar-collapse" id="collapsibleNavbar">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link" href="#">链接</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">链接</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">链接</a>
                            </li>
                        </ul>
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">下拉菜单</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">链接</a></li>
                            <li><a class="dropdown-item" href="#">另一个链接</a></li>
                            <li><a class="dropdown-item" href="#">第三个链接</a></li>
                        </ul>
                    </div>

                    <!--                    <a class="navbar-brand" href="javascript:void(0)">Logo</a>-->
                    <form class="d-flex">
                        <input class="form-control me-2" type="text" placeholder="Search">
                        <button class="btn btn-primary" type="button">Search</button>
                    </form>
                </div>
            </nav>

        <div class="container-fluid p-5 bg-primary text-white text-center">
            <h1>我的第一张 Bootstrap 页面</h1>
            <footer class=".blockquote-footer" >来自w3cshool</footer>
        </div>

        <div class="container mt-5">
            <div class="row">
                <div class="col-sm-4">
                    <h3>列 1：春日</h3>
                    <p>胜日寻芳泗水滨，无边光景一时新。</p>
                    <p>等闲识得东风面，万紫千红总是春。</p>
                </div>
                <div class="col-sm-4">
                    <h3>列 2：初夏绝句</h3>
                    <p>纷纷红紫已成尘，布谷声中夏令新。</p>
                    <p>夹路桑麻行不尽，始知身是太平人。</p>

                </div>
                <div class="col-sm-4">
                    <h3>列 3：山行</h3>
                    <p>远上寒山石径斜，白云生处有人家。</p>
                    <p>停车坐爱枫林晚，霜叶红于二月花。</p>
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <h1>我的第一张 Bootstrap 页面</h1>
            <p>这部分在 .container-fluid 类中。</p>
            <p>.container-fluid 类提供全宽容器，跨越视口的整个宽度。</p>
        </div>


        <div class="container">
            <h1>我的第一张 Bootstrap 页面</h1>
            <p>这部分在 .container 类中。</p>
            <p>.container 类提供了响应式固定宽度的容器。</p>
        </div>
<!--        外界引用标记-->
        <blockquote class="blockquote container">
            <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
            <footer class="blockquote-footer">From WWF's website</footer>
        </blockquote>
        <div class="container" mt-3>
            <h1>上下文背景</h1>
            <p>请使用上下文背景类来提供“由颜色表达的某种意义”。</p>
            <p>请注意，如果您想要不同的文本颜色，您还可以添加 .text-* 类：</p>
            <p class="bg-primary text-white">此文本很重要。"bg-primary text-white"</p>
            <p class="bg-success text-white">此文本表示成功。"bg-success text-white"</p>
            <p class="bg-info text-white">此文本代表了一些信息。"bg-info text-white"</p>
            <p class="bg-warning text-white">此文本表示警告。"bg-warning text-white"</p>
            <p class="bg-danger text-white">此文本代表危险。"bg-danger text-white"</p>
            <p class="bg-secondary text-white">次要背景颜色。"bg-secondary text-white"</p>
            <p class="bg-dark text-white">深灰色背景颜色。"bg-dark text-white"</p>
            <p class="bg-light text-dark">浅灰色背景色。"bg-light text-dark"</p>
        </div>
<!--        黑色可悬停 简介表格-->
        <div class="container ">
            <table class="table table-dark table-hover">
                <thead>
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Email</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Bill</td>
                    <td>Gates</td>
                    <td>bill@example.com</td>
                </tr>
                <tr>
                    <td>Steve</td>
                    <td>Jobs</td>
                    <td>steve@example.com</td>
                </tr>
                <tr>
                    <td>Elon</td>
                    <td>Musk</td>
                    <td>elon@example.com</td>
                </tr>
                </tbody>
            </table>

        </div>
<!--        上下文类 不同行不同颜色-->
        <div class="container">
            <table class="table">
                <thead>
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Email</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Default</td>
                    <td>Defaultson</td>
                    <td>def@somemail.com</td>
                </tr>
                <tr class="table-primary">
                    <td>Primary</td>
                    <td>Joe</td>
                    <td>joe@example.com</td>
                </tr>
                <tr class="table-success">
                    <td>Success</td>
                    <td>Gates</td>
                    <td>bill@example.com</td>
                </tr>
                <tr class="table-danger">
                    <td>Danger</td>
                    <td>Jobs</td>
                    <td>steve@example.com</td>
                </tr>
                <tr class="table-info">
                    <td>Info</td>
                    <td>Musk</td>
                    <td>elon@example.com</td>
                </tr>

                </tbody>
            </table>
        </div>
<!--        警告框-->
        <div class="container mt-3">
                <h2>警告框</h2>
                <p>警报是使用 .alert 类创建的，然后是上下文颜色类：</p>
                <div class="alert alert-success">
                    <strong>成功！</strong>此警报框表示成功或积极的动作。
                </div>
                <div class="alert alert-info">
                    <strong>信息！</strong>此警报框表示中性的信息更改或操作。
                </div>
                <div class="alert alert-warning">
                    <strong>警告！</strong>此警报框可能表示可能需要注意的警告。
                </div>
                <div class="alert alert-danger">
                    <strong>危险！</strong>此警报框表示危险或潜在的负面操作。
                </div>
                <div class="alert alert-primary">
                    <strong>基本！</strong>此警报框表示重要的动作。
                </div>
                <div class="alert alert-secondary">
                    <strong>次要！</strong>此警报框表示不太重要的操作。
                </div>
                <div class="alert alert-dark">
                    <strong>深色！</strong>深灰色警报。
                </div>
                <div class="alert alert-light">
                    <strong>浅色！</strong>浅灰色警报。
                </div>
            </div>

<!--警告链接-->
            <div class="container mt-3">
                <h2>警告链接</h2>
                <p>将 .alert-link 类添加到警告框内的任何链接，可创建“匹配的彩色链接”：</p>
                <div class="alert alert-success">
                    <strong>成功！</strong>您应该<a href="#" class="alert-link">阅读这条消息</a>。
                </div>
                <div class="alert alert-info">
                    <strong>信息！</strong>您应该<a href="#" class="alert-link">阅读这条消息</a>。
                </div>
                <div class="alert alert-warning">
                    <strong>警告！</strong>您应该<a href="#" class="alert-link">阅读这条消息</a>。
                </div>
                <div class="alert alert-danger">
                    <strong>危险！</strong>您应该<a href="#" class="alert-link">阅读这条消息</a>。
                </div>
                <div class="alert alert-primary">
                    <strong>基本！</strong>您应该<a href="#" class="alert-link">阅读这条消息</a>。
                </div>
                <div class="alert alert-secondary">
                    <strong>次要！</strong>您应该<a href="#" class="alert-link">阅读这条消息</a>。
                </div>
                <div class="alert alert-dark">
                    <strong>深色！</strong>您应该<a href="#" class="alert-link">阅读这条消息</a>。
                </div>
                <div class="alert alert-light">
                    <strong>浅色！</strong>您应该<a href="#" class="alert-link">阅读这条消息</a>。
                </div>
            </div>
<!--        可关闭弹窗-->
        <div class="alert alert-success alert-dismissible">
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            <strong>成功！</strong>此警报框表示成功或积极的动作。
        </div>
<!--        淡入淡出-->
        <div class="alert alert-danger alert-dismissible fade show">
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            <strong>成功！</strong>此警报框表示成功或积极的动作。
        </div>
<!--        按钮-->
        <div class="container">
            <button type="button" class="btn">基础</button>
            <button type="button" class="btn btn-primary">主要</button>
            <button type="button" class="btn btn-secondary">次要</button>
            <button type="button" class="btn btn-success">成功</button>
            <button type="button" class="btn btn-info">信息</button>
            <button type="button" class="btn btn-warning">警告</button>
            <button type="button" class="btn btn-danger">危险</button>
            <button type="button" class="btn btn-dark">深色</button>
            <button type="button" class="btn btn-light">浅色</button>
            <button type="button" class="btn btn-link">链接</button>
        </div><br/>
<!--        按钮的不可选中和选中-->
        <div class="container">
            <button type="button" class="btn btn-primary active">Active Primary</button>
            <button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
            <a href="#" class="btn btn-primary disabled">Disabled Link</a>
        </div><br/>
<!--        按钮加载样式-->
        <div class="container">
            <button class="btn btn-primary">
                <span class="spinner-border spinner-border-sm"></span>
            </button>

            <button class="btn btn-primary">
                <span class="spinner-border spinner-border-sm"></span>
                Loading..
            </button>

            <button class="btn btn-primary" disabled>
                <span class="spinner-border spinner-border-sm"></span>
                Loading..
            </button>

            <button class="btn btn-primary" disabled>
                <span class="spinner-grow spinner-grow-sm"></span>
                Loading..
            </button>
        </div><br/>
<!--        按钮组-->
        <div class="btn-group">
            <button type="button" class="btn btn-primary">华为</button>
            <button type="button" class="btn btn-primary">大疆</button>
            <button type="button" class="btn btn-primary">小米</button>
        </div><br/>
<!--        按钮和下拉菜单-->
        <div class="container">
            <div class="btn-group">
                <button type="button" class="btn btn-primary">华为</button>
                <button type="button" class="btn btn-primary">大疆</button>
                <div class="btn-group">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">小米</button>
                    <ul class="dropdown-menu">
                       <li> <a class="dropdown-item" href="#">手机</a></li>

                        <li> <a class="dropdown-item" href="#">平板电脑</a></li>
                    </ul>
                </div>
            </div>
        </div><br/>
<!--        徽章-->
        <div class="container">
            <h1>Example heading <span class="badge bg-secondary">New</span></h1>
            <h2>Example heading <span class="badge bg-secondary">New</span></h2>
            <span class="badge bg-primary">主要</span>
            <span class="badge bg-secondary">次要</span>
            <span class="badge rounded-pill bg-primary">主要</span>
            <span class="badge rounded-pill bg-secondary">次要</span>
            <span class="badge rounded-pill bg-success">成功</span>
            <button type="button" class="btn btn-primary">
                消息 <span class="badge bg-danger">4</span>
            </button>
          </div><br/>


<!--        分页-->
        <div class="container">
            <ul class="pagination pagination-lg">
                <li class="page-item disabled" ><a class="page-link" href="#">上一页</a></li>
                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item"><a class="page-link" href="#">下一页</a></li>
            </ul>
        </div><br/>
<!--卡片-->
        <div class="container">
            <div class="card" style="width:400px">
                <img class="card-img-top" src="../images/peopleImg.png" alt="Card image">
<!--                <img class="card-img-bottom" src="../images/peopleImg.png" alt="Card image">-->
                <div class="card-body">
<!--                    叠加-->
<!--                    <div class="card-img-overlay">-->
                    <h4 class="card-title">Bill Gates</h4>
                    <p class="card-text">Bill Gates 是一位程序员和工程师。一些示例文本。一些示例文本。</p>
                    <a href="#" class="btn btn-primary">查看个人资料</a>
                </div>
            </div>
        </div><br/>
<!--胶囊下拉选项卡-->
        <div class="container mt-3">
            <h2>胶囊下拉菜单</h2>
            <ul class="nav nav-pills">
                <li class="nav-item">
                    <a class="nav-link active" href="#">活动</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">下拉列表</a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">链接 1</a></li>
                        <li><a class="dropdown-item" href="#">链接 2</a></li>
                        <li><a class="dropdown-item" href="#">链接 3</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">链接</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">禁用</a>
                </li>
            </ul>
        </div><br/>
<!--        可切换的 / 动态胶囊导航-->
        <div class="container">
            <!--导航胶囊 -->
            <ul class="nav nav-pills">
                <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="pill" href="#home">春日</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="pill" href="#menu1">初夏</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="pill" href="#menu2">山行</a>
                </li>
            </ul>

            <!-- 选项卡窗格 -->
            <div class="tab-content">
                    <div class="tab-pane container active" id="home">
                        胜日寻芳泗水滨，无边光景一时新。

                        等闲识得东风面，万紫千红总是春</div>
                <div class="tab-pane container fade" id="menu1">初夏绝句
                    纷纷红紫已成尘，布谷声中夏令新。

                    夹路桑麻行不尽，始知身是太平人。</div>
                <div class="tab-pane container fade" id="menu2">山行
                    远上寒山石径斜，白云生处有人家。

                    停车坐爱枫林晚，霜叶红于二月花。</div>
            </div>
        </div><br/>



        <div class="container">
            <!-- 轮播 -->
            <div id="demo" class="carousel slide" data-bs-ride="carousel">

                <!-- 指标/点 -->
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
                    <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
                    <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
                    <button type="button" data-bs-target="#demo" data-bs-slide-to="3"></button>
                    <button type="button" data-bs-target="#demo" data-bs-slide-to="4"></button>
                    <button type="button" data-bs-target="#demo" data-bs-slide-to="5"></button>
                </div>
                <!-- 幻灯片/轮播 -->
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="http://p6-novel.byteimg.com/img/novel-static/d4b251d1c3fb25753e7dfc5b98341c13~2880x0.jpeg"
                             alt="Los Angeles" class="d-block w-100">
                        <div class="carousel-caption">
                            <h3>Los Angeles</h3>
                            <p>Thank you, Los Angeles!</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="http://p3-novel.byteimg.com/img/novel-static/5998f273bef7da074a226f9a3075740a~2880x0.jpeg"
                             alt="Chicago" class="d-block w-100">
                        <div class="carousel-caption">
                            <h3>Chicago</h3>
                            <p>Thank you,Chicago!</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="https://p3-tt.byteimg.com/origin/novel-static/4ad22427c3d6bc431acfd1eee627c9bf"
                             alt="New York" class="d-block w-100">
                        <div class="carousel-caption">
                            <h3>Beijing</h3>
                            <p>Thank you, Beijing!</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="https://p3-tt.byteimg.com/origin/novel-static/4e4f66cb2e65ced2817ba00964754c29"
                             alt="New York" class="d-block w-100">
                        <div class="carousel-caption">

                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="https://p3-tt.byteimg.com/origin/novel-static/632ab30c596c1fa13690c45e76eb8323"
                             alt="New York" class="d-block w-100">
                        <div class="carousel-caption">

                        </div>
                    </div>
                </div>

                <!-- 左右控件/图标 -->
                <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </button>
            </div>
        </div><br/>
        <div class="container"></div><br/>
        <div class="container"></div><br/>
        <div class="container"></div><br/>
        <div class="container"></div><br/>
        <div class="container">
            end

        </div>
    </body>
</html>